<template>
  <!-- 借款类型占比 -->
  <div id="proportionOfLoanType">
    <div class="topBox">
      <el-icon class="icon" color="#059B37" size="26"
        ><el-icon-caret-right
      /></el-icon>
      <p>借款类型占比</p>
    </div>
    <scEcharts :option="option"></scEcharts>
  </div>
</template>
<script>
import scEcharts from '@/components/scEcharts'
export default {
  name: 'proportionOfLoanType',
  components: {
    scEcharts
  },
  data () {
    return {
      option: {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {d}%'
        },
        legend: {
          icon: "circle",
          orient: 'vertical',
          right: '10',
          bottom: '20'
        },
        series: [
          {
            name: '借款类型',
            type: 'pie',
            radius: '50%',
            data: [],

          }
        ]
      }


    }
  },
  props: {
    date: {
      type: String,
      required: true,
      default: () => new Date().getFullYear().toString()
    }
  },
  watch: {
    date (val) {
      this.getData()
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      let { data } = await this.$API.finance.getProportionOfLoanType.get({ time: this.date })
      let list = data
      list.forEach(item => {
        item.value = item.loanTypeAvg
      })
      this.option.series[0].data = list
    }
  }
}
</script>
<style lang="scss" scoped>
#proportionOfLoanType {
  width: 40%;
  height: 100%;
  padding: 20px 20px 40px 20px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.1);
  .topBox {
    display: flex;
    align-items: center;
    font-size: 18px;
  }
}
</style>